<template>
  <div id="cesiumContainer" ref="cesiumContainer"></div>
</template>

<script setup>
import * as Cesium from 'cesium';
import { onMounted } from 'vue';
import './Widgets/widgets.css';
window.CESIUM_BASE_URL = '/';
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmMjBkMTJjOC00OTg4LTRiMzktYjE0Yy1jMzRhZWY5YTAxMDEiLCJpZCI6MzY2ODM0LCJpYXQiOjE3NjQ5MDAzNzF9.FqwB-COJUIrRPRhAMwW9a7_yXqNaX57ITp6naogzJ-Y';
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
  // 西边的经度  
  89, 
  // 南边的纬度
  20.0, 
  // 东边的经度
  110.0, 
  // 北边的纬度
  90.0
);
const tk = 'cb2463b2c4bbbf1bfbdf7a06d63f0993';
// 1. 天地图·地形底图（影像）
const tdtimgLayer = new Cesium.WebMapTileServiceImageryProvider({
  url: `http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&tk=${tk}`,
  layer: 'img',
  style: 'default',
  format: 'tiles',
  tileMatrixSetID: 'w',
  maximumLevel: 18   // 地形底图最高到 18 级
});
 
// 2. 天地图·地形注记（道路、地名）
const tdtciaLayer = new Cesium.WebMapTileServiceImageryProvider({
  url: `http://t0.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&tk=${tk}`,
  layer: 'cia',
  style: 'default',
  format: 'tiles',
  tileMatrixSetID: 'w',
  maximumLevel: 18
});
 
// 3. 天地图·矢量底图（纯线条，无影像）
const tdtvecProvider = new Cesium.WebMapTileServiceImageryProvider({
  url: `http://t2.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&tk=${tk}`,
  layer: 'vec',
  style: 'default',
  format: 'tiles',
  tileMatrixSetID: 'w',
  maximumLevel: 18
});
 
// 4. 天地图·矢量注记（文字、POI）
const tdtcvaProvider = new Cesium.WebMapTileServiceImageryProvider({
  url: `http://t3.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&tk=${tk}`,
  layer: 'cva',
  style: 'default',
  format: 'tiles',
  tileMatrixSetID: 'w',
  maximumLevel: 18
});
 
// 5. OpenStreetMap 全球开源底图（备用）
const openstreetmapProvider = new Cesium.OpenStreetMapImageryProvider({
  url: 'https://a.tile.openstreetmap.org/'
});
 
// 6. 高德矢量（不稳定，仅供测试，商用请确认版权）
const gdVec = new Cesium.UrlTemplateImageryProvider({
  url: 'https://wprd0{s}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7',
  subdomains: ['1', '2', '3', '4'],
  maximumLevel: 18,
  credit: '© 高德软件'
});
onMounted(() => {

  const viewer = new Cesium.Viewer('cesiumContainer', {
    // 信息框
    infoBox: false,
    // 搜索框
    geocoder: false,
    // 默认视角
    homeButton: false,
    // 场景模式切换 3d 2d 2.5d
    sceneModePicker: false,
    // 地图源
    baseLayerPicker: false,
    // 帮助按钮
    navigationHelpButton: false,
    // 动画播放控件
    animation: false,
    // 时间轴
    timeline: false,
    // 是否全屏
    fullscreenButton: false,
    // 天空盒
    skyBox: new Cesium.SkyBox({
      sources: {
        positiveX: './textures/skybox/px.png',
        negativeX: './textures/skybox/nx.png',
        positiveY: './textures/skybox/py.png',
        negativeY: './textures/skybox/ny.png',
        positiveZ: './textures/skybox/pz.png',
        negativeZ: './textures/skybox/nz.png',
      },
    }),
    imageryProvider: tdtimgLayer,
    terrainProvider: Cesium.createWorldTerrain({
      requestVertexNormals: true, // 请求顶点法线以启用光照效果
      requestWaterMask: true, // 请求水掩码以启用水体效果
    }),
    // terrainProvider: new Cesium.CesiumTerrainProvider({
    //   url: './terrain/gz',
    // }),
  });
  // viewer.imageryLayers.addImageryProvider(tdtciaLayer);
  // viewer.imageryLayers.addImageryProvider(tdtvecProvider);
  // viewer.imageryLayers.addImageryProvider(tdtcvaProvider);
  // 1.屏幕坐标是笛卡尔二维坐标 Cartesian2类型
  // 2.地理坐标是经纬度坐标 WGS-84坐标系 Cartographic类型 有经度 维度 高度三者来决定
  // 3.世界坐标是笛卡尔三维坐标 Cartesian3类型

  // 角度转弧度
  const radians = Cesium.Math.toRadians(30);
  console.log('radians', radians);
  // 弧度转角度
  const degrees = Cesium.Math.toDegrees(2 * Math.PI);
  console.log('degrees', degrees);

  const cartograph = Cesium.Cartographic.fromDegrees(104, 33.5, 100);
  console.log('cartograph', cartograph);

  const cartesian = Cesium.Cartesian3.fromDegrees(104, 33.5, 100);
  console.log('cartesian', cartesian);
  const newCartograph = Cesium.Cartographic.fromCartesian(cartesian);
  console.log('newCartograph', newCartograph);
  const lon = Cesium.Math.toDegrees(newCartograph.longitude);
  const lat = Cesium.Math.toDegrees(newCartograph.latitude);
  console.log('lon', lon, 'lat', lat);
  // 设置相机视角 北京天安门
  // viewer.camera.setView({
  //   destination: Cesium.Cartesian3.fromDegrees(116.3914, 39.904, 2000),
  //   orientation: {
  //     heading: Cesium.Math.toRadians(0), // 朝向 y轴正方向，左右的转动
  //     pitch: Cesium.Math.toRadians(0), // 俯仰角 底部看天空  顶部看地面 x轴转动
  //     roll: Cesium.Math.toRadians(0), // 翻滚角 z轴转动
  //   },
  // });
  const bj = Cesium.Cartesian3.fromDegrees(116.3914, 39.88, 2000);
  const gz = Cesium.Cartesian3.fromDegrees(113.3246, 23.1100, 2000);
  viewer.camera.flyTo({
    destination: gz,
    orientation: {
      heading: Cesium.Math.toRadians(0), // 朝向 y轴正方向，左右的转动
      pitch: Cesium.Math.toRadians(-90), // 俯仰角 底部看天空  顶部看地面 x轴转动
      roll: Cesium.Math.toRadians(0), // 翻滚角 z轴转动
    },
    duration: 3,
  });
 
  // 添加3D建筑物图层
  const osmBuildings = viewer.scene.primitives.add(
    Cesium.createOsmBuildings()
  );
  // 添加广州塔点位
  const point = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(113.319, 23.109, 500),
    point: {
      pixelSize: 10,
      color: Cesium.Color.RED,
      outlineColor: Cesium.Color.WHITE,
      outlineWidth: 4,
    },
    label: {
      text: '广州塔',
      font: '18px sans-serif',
      fillColor: Cesium.Color.WHITE,
      outlineColor: Cesium.Color.BLACK,
      outlineWidth: 2,
      style: Cesium.LabelStyle.FILL_AND_OUTLINE,
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
      pixelOffset: new Cesium.Cartesian2(0, -15),
    },
  });
  document.addEventListener('keydown', (event) => {
    // 移动速度随着海拔变化，正相关
    const speed = viewer.camera.positionCartographic.height / 100;
    // 控制相机
    if (event.code === 'KeyW') {
      viewer.camera.moveForward(speed); // 按照当前相机的方向前进
    } else if (event.code === 'KeyS') {
      viewer.camera.moveBackward(speed); // 按照当前相机的方向后退
    } else if (event.code === 'KeyA') {
      viewer.camera.moveLeft(speed); // 向左移动
    } else if (event.code === 'KeyD') {
      viewer.camera.moveRight(speed); // 向右移动
    } else if(event.code === 'KeyQ'){
      viewer.camera.lookLeft(Cesium.Math.toRadians(0.1)); // 向左转
    } else if(event.code === 'KeyE'){
      viewer.camera.lookRight(Cesium.Math.toRadians(0.1)); // 向右转
    }else if(event.code === 'KeyR'){
      viewer.camera.lookUp(Cesium.Math.toRadians(0.1)); // 向上转
    } else if(event.code === 'KeyF'){
      viewer.camera.lookDown(Cesium.Math.toRadians(0.1)); // 向下转
    } else if(event.code === 'KeyG'){
      viewer.camera.twistLeft(Cesium.Math.toRadians(0.1)); // 顺时针旋转
    } else if(event.code === 'KeyH'){
      viewer.camera.twistRight(Cesium.Math.toRadians(0.1)); // 逆时针旋转
    }
  });
  viewer.cesiumWidget.creditContainer.style.display = "none";
});
</script>

<style>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#cesiumContainer {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>
